@charset "UTF-8";
li {
  list-style: none;
}

.box1 {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
  position: relative;
  margin-top: 10px;
}

.box2 {
  display: flex;
  position: absolute;
}

.box2 .box_img_sp {
  width: 300px;
  height: 350px;
  transition: 1s;
  border-radius: 20px;
  overflow: hidden;
}

.box2 .box_img_sp video {
  width: 100%;
  height: 100%;
}

.box2 .box_img_sp .dingwei1 {
  width: 300px;
  height: 50px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  opacity: 0;
  transition: 1s;
}

.box2 .box_img_sp img {
  width: 100%;
}

.box2 .box_img_sp img:hover {
  overflow: scroll;
  transform: translateY(-1000px);
  transition: 13s linear;
  cursor: pointer;
}

.box2 .box_img_sp:hover {
  box-shadow: 0px 0px 10px #888888;
  /* 边框阴影 */
  -moz-box-shadow: 0px 0px 10px #888888;
  /* 老的 Firefox */
  transform: translate(0, -5px);
}

.box2 .box_img_sp:hover .dingwei1 {
  cursor: pointer;
  opacity: 1;
}

.box2 .box_imgs {
  width: 300px;
  height: 350px;
  overflow: hidden;
  margin-left: 20px;
  margin-top: 20px;
  position: relative;
  border-radius: 20px;
  transition: 1s;
  background: linear-gradient(45deg, red, yellow, green);
}

.box2 .box_imgs video {
  width: 100%;
  height: 100%;
}

.box2 .box_imgs .dingwei1 {
  width: 300px;
  height: 50px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  opacity: 0;
  transition: 1s;
}

.box2 .box_imgs .box_imges {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #cccccc7d;
  opacity: 0;
  transition: 1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box2 .box_imgs .box_imges .box_imgess {
  width: 150px;
  height: 50px;
  border-radius: 20px;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
}

.box2 .box_imgs .box_imges .box_imgess:hover {
  cursor: pointer;
  background-color: aqua;
}

.box2 .box_imgs img {
  width: 100%;
}

.box2 .box_imgs:hover {
  box-shadow: 0px 0px 10px #888888;
  /* 边框阴影 */
  -moz-box-shadow: 0px 0px 10px #888888;
  /* 老的 Firefox */
  transform: translate(0, -5px);
}

.box2 .box_imgs:hover .dingwei1 {
  cursor: pointer;
  opacity: 1;
}

.box2 .box_imgs:hover .box_imges {
  opacity: 1;
}

.box2 .box_img {
  width: 300px;
  height: 600px;
  background-color: #ccc;
  transition: 1s;
  border-radius: 20px;
  overflow: hidden;
}

.box2 .box_img .dingwei1 {
  width: 300px;
  height: 50px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  opacity: 0;
  transition: 1s;
}

.box2 .box_img img {
  width: 100%;
}

.box2 .box_img img:hover {
  overflow: scroll;
  transform: translateY(-1000px);
  transition: 13s linear;
  cursor: pointer;
}

.box2 .box_img:hover {
  box-shadow: 0px 0px 10px #888888;
  /* 边框阴影 */
  -moz-box-shadow: 0px 0px 10px #888888;
  /* 老的 Firefox */
  transform: translate(0, -5px);
}

.box2 .box_img:hover .dingwei1 {
  cursor: pointer;
  opacity: 1;
}

.box2 img {
  width: 250px;
  line-height: 50px;
  /* flex-shrink: 0; */
  transition: 1s;
}

.box_img1 {
  width: 250px;
  height: 100px;
  line-height: 50px;
  transition: 1s;
  margin-left: 15px;
  margin-top: 20px;
}

.box_img1:hover {
  cursor: pointer;
  /* transform属性 */
  transform: translate(0, -15px);
}

h5:hover {
  color: blue;
}
